<template>
    <div class="login_container">
      <div class="login_box">
          <el-form ref="loginForm" :model="loginForm" :rules="rules">
            <!-- 用户名 -->
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <!-- 按钮区 -->
            <el-form-item class="btns">
                <el-button type="primary" @click="doLogin">登录</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        doLogin: function () {
            this.$refs['loginForm'].validate(async (valid) => {
                if (!valid) {
                    return;
                }
                // 发起http请求
                const result = await this.$http.post('test', this.loginForm);

                // 执行登录成功的消息提醒
                this.$message({message: "登录成功.", type: "success"});

                // 执行跳转
                window.sessionStorage.setItem("token", "fertdhtyj");

                // 页面跳转
                this.$router.push('/home');
            });
        },
        resetForm: function () {
            this.$refs['loginForm'].resetFields();
        }
    }
}
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}
.login_box {
    width: 450px;
    height: 300px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

.btns {
    display: flex;
    justify-content: end;
}

</style>
